<template>
	<view class="contract-box">
		<u-form labelPosition="left" :model="contractForm.data">
			<view class="main p-l-r-32 bg-color">
				<u-form-item label="本人" labelWidth="100" class="">
				</u-form-item>
				<view class="">
					<view class="sign-border">
						<view class="flex sign">
							<view class="list">
								<view>
									<image src="../../static/images/preson-icon.png"></image>
								</view>
								<view>
									<view class="flex">
										<view v-if="contractForm.data.member.key_word" class="key_word">
											({{ contractForm.data.member.key_word }}) </view>
										{{ contractForm.data.member.company_name }}
										{{ contractForm.data.member.user_name }}
									</view>
									<text>{{ contractForm.data.member.cellphone }}</text>
								</view>
							</view>
							<view class="tag">本人</view>
						</view>
					</view>
					<view class="flex" @click="addKeyWord()">
						<u-icon name="plus-circle" color="#4787F0" size="18"></u-icon>
						<text class="font-color font-size-28" style="padding-left: 10rpx;font-weight: 500;">签署位置(关键字)
						</text>
					</view>
					<u-form-item prop="member" class="formitem" labelWidth="50" style="height: 0;padding: 0;">
					</u-form-item>
				</view>
			</view>
			<view class="main p-l-r-32 bg-color ">
				<u-form-item label="签署文件" labelWidth="200" class=""></u-form-item>
				<view class="flex" style="margin-bottom: 24rpx;">
					<view class="flex-1 flex">
						<u-icon name="file-text" color="rgba(0, 0, 0, 0.60)" size="16"
							style="margin-top: 6rpx;"></u-icon>
						<view class="flex line-clamp-1" style="margin-left: 2rpx;">
							<text class="font-size-28 font-color-1"
								@click="policyPreview(data.fileInfo.file)">{{ arrayGet(data,'fileInfo.file.org_name') }}
							</text>
						</view>
					</view>
				</view>
				<u-line></u-line>
			</view>
		</u-form>
		<!-- 底部按钮 -->
		<view style="position: fixed;bottom: 0;width: 100%;z-index: 999;">
			<view class="flex bottom-button">
				<u-button type="primary" text="手绘签署" class="custom-style" @click="isAuthentication(1) "
					:customStyle="{borderRadius:'0rpx',border:'none',padding:'0',height:'auto'}"></u-button>
				<u-button v-if="store.state.userType == 2" type="primary" class="custom-style"
					@click="isAuthentication(2)"
					:customStyle="{borderRadius:'0rpx',border:'none',padding:'0',height:'auto'}">印章签署 </u-button>
			</view>
		</view>
		<view class="signature" v-if="control.signaAuthShow">
			<signa-ture @getImg="getImgAuth" @close="control.signaAuthShow = false"></signa-ture>
		</view>
		<key-board ref="keyboardC" @return-pass="returnPass"></key-board>
		<keyword-page ref="keywordPageRef" @return-keyword="keyword.returnKeyword"></keyword-page>
	</view>
</template>
<script setup>
	import SignaTure from "@/components/signature.vue";
	import KeyBoard from "@/components/keyboard.vue";
	import KeywordPage from "@/components/keyword-page.vue";
	import {
		useStore
	} from 'vuex';
	import {
		fileList,
	} from "@/api/module/file";
	import {
		onLoad,
		onShow,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		memberInfo,
		getEnterpriseInfo
	} from "@/api/module/mine.js";
	import {
		reactive,
		ref
	} from 'vue'
	import {
		fileDetail,
		contractSign,
		userContractSign,
		fileSignStore
	} from "@/api/module/contract.js"
	import {
		inObject,
		arrayFilter,
		msg,
		arrayGet,
		arrayPluck,
		upload,
		goNav,
		goRedirect
	} from "@/utils/common.js"
	import {
		policyPreview
	} from "@/utils/article/fileRead";
	import {
		authentication,
		jump
	} from "@/utils/contract/isAuthentication.js"
	const store = useStore()
	const keyboardC = ref();
	const control = ref({
		signaAuthShow: false,
	})
	const contractForm = reactive({
		data: {
			member: {
				key_word: "",
			},
			signer: {
				key_word: "",
				user: []
			},
		},
	});
	const data = reactive({
		memberInfo: {
			count: 0,
			use_count: 0,
		},
		fileInfo: {},
		signer_type: 'self',
		member_contract_id: 0,
		detail: {},
		readFileId: [],
		readOtherFileId: [],
	});
	const addKeyWord = () => {
		keyword.open()
	}
	// 关键字选择
	const keywordPageRef = ref(null);
	const keyword = reactive({
		open: () => {
			keywordPageRef.value.open(store.state.userType);
		},
		returnKeyword: (keywordVal) => {
			if (keywordVal.length < 1) {
				return msg('签署关键字获取失败');
			}
			contractForm.data.member.key_word = keywordVal
			keywordPageRef.value.close();
		},
	});
	const isAuthentication = async (status) => {
		if (!await authentication(store.state.userType)) {
			return
		}
		if (!contractForm.data.member.key_word) {
			msg('请添加关键字');
			return;
		}
		switch (status) {
			case 1:
				control.value.signaAuthShow = true; //手绘签署 打开签名
				break;
			case 2:
				if (store.state.userType == 1) {
					sealsign() //个人
				} else {
					uni.redirectTo({
						url: '/pages/contract/enterprise/sealList?signer_type=' + data.signer_type +
							'&member_contract_id=' + data.fileInfo.id + '&annex_file=&keyword=' +
							contractForm.data.member.key_word + '&file_id=' + data.fileInfo.file.id
					});
					// goNav('/pages/contract/enterprise/sealList?signer_type=' + data.signer_type +
					// 	'&member_contract_id=' + data.fileInfo.id + '&annex_file=&keyword=' + contractForm.data
					// 	.member.key_word + '&file_id=' + data.fileInfo.file.id) //企业
				}
				break
		}
	}
	const getImgAuth = (url) => {
		const tempArr = url.split('.');
		const tempPathArr = url.split('/');
		const tempExt = tempArr[tempArr.length - 1];
		const tempName = tempPathArr[tempPathArr.length - 1];
		upload({
			tempName: tempName,
			tempPath: url,
			tempExt: tempExt,
		}, function(response) {
			userSign({
				file_id: data.fileInfo.file.id,
				member_seal_id: 0,
				member_seal_image: response.res.url,
			});
		});
		control.value.signaAuthShow = false
	}
	const sealsign = () => {
		// userSign({
		// 	signer_type: data.signer_type,
		// 	member_contract_id: data.fileInfo.id,
		// 	member_seal_id: memberSealId.value,
		// 	member_seal_image: '',
		// 	password: res.content,
		// 	annex_file: [],
		// });
	}
	const userSign = (params) => {
		keyboardC.value.open(params)
	}
	const returnPass = (data) => {
		data.key_word = contractForm.data.member.key_word
		keyboardC.value.close()
		fileSignStore(data).then(res => {
			msg('签署成功');
			setTimeout(() => {
				goRedirect('/pages/contract/file-list')
			}, 1000)
		})
	}
	onUnload(() => {})
	onLoad((options) => {
		if (store.state.userType == 1) {
			memberInfo().then(res => {
				const certification = arrayGet(res, 'member.member_certification');
				console.log(res.count);
				contractForm.data.member = {
					key_word: "",
					cellphone: arrayGet(certification, 'mobile_no'),
					user_name: arrayGet(certification, 'name'),
					signer_user_type: 'member',
					remaining_quantity: arrayGet(res, 'count') - arrayGet(res, 'use_count'),
				}
			}).catch(err => {});
		} else {
			getEnterpriseInfo().then(res => {
				data.memberInfo = res;
				const certification = arrayGet(res, 'member.member_certification');
				contractForm.data.member = {
					key_word: "",
					cellphone: arrayGet(certification, 'mobile_no'),
					user_name: arrayGet(certification, 'name'),
					company_name: res.company_name,
					signer_user_type: 'user'
				}
			}).catch(err => {});
		}
		fileList({
			id: options.id
		}).then((res) => {
			data.fileInfo = res
		})
	})
</script>
<style scoped lang="scss" src="/static/css/contract/initiate.scss"></style>